<template>
	<div>
		<span id="chengshi" @click="toCity">{{$store.state.cityName}}<van-icon name="arrow-down" size="15" color='white'/></span>
		<film-swiper :key="Datalist.length">
			<swiper-item v-for="item in Datalist" :key="item.bannerId" class="lunbo">
				<img :src="item.imgUrl" >
			</swiper-item>
		</film-swiper>
		<film-header class="headern"></film-header>
	</div>
</template>

<script type="text/javascript">
	import FilmSwiper from '../components/flims/FilmSwiper.vue'
	import SwiperItem from '../components/flims/SwiperItem.vue'
	import http from '../util/http.js'
	import FilmHeader from '../components/flims/FilmHeader.vue'
	export default{
		mounted() {
			let _this = this;
			setTimeout(() => {
				http({
					url:`/gateway?type=2&cityId=${this.$store.state.cityId}k=4841248`,
					headers:{
						'X-Host':'mall.cfg.common-banner'
					}
				}).then(res => _this.Datalist = res.data.data)
			},1000)
		},
		components:{
			FilmSwiper,
			SwiperItem,
			FilmHeader
		},
		data(){
			return{
				Datalist:[]
			}
		},
		methods:{
			toCity(){
				this.$router.push('/City');
			}
		}
	}
</script>

<style type="text/css">
	#chengshi{
		position: fixed;
		background-color: rgba(0,0,0,0.5);
		top: 0.1875rem;
		left: 0.1875rem;
		color: white;
		z-index: 100;
		border-radius: 0.625rem;
		font-size: 0.75rem;
		padding: 0.0625rem 0.125rem;
		height: 1.25rem;
		text-align: center;
		line-height: 1.25rem;
	}
	.lunbo>img{
		width: 100%;
		height: 100%;
	}
	.headern{
		margin-bottom: 2.5rem;
	}
</style>